import React, { Component } from "react";
import { View, Text, TouchableOpacity, Modal, StatusBar } from "react-native";
// import { Modal as AModal } from "@ant-design/react-native";
import ImageViewer from "components/ImageZoomViewer";

import PageMark from "components/PageMark";

import styles from "./styles";

// const { width, height } = Dimensions.get("window");

class ModalImageBox extends Component {
  componentDidMount() {
    this.changeTopBarStatus();
  }

  componentDidUpdate() {
    this.changeTopBarStatus();
  }

  componentWillUnmount() {
    StatusBar.setHidden(false);
  }

  changeTopBarStatus = () => {
    // if (Platform.OS === "android") {
    //   const { visible } = this.props;
    //   if (visible) {
    //     StatusBar.setHidden(true);
    //   } else {
    //     StatusBar.setHidden(false);
    //   }
    // }
  };

  localOnSave = url => {
    const { onSave = () => {}, onClose } = this.props;
    onClose();
    onSave(url);
  };

  render() {
    const {
      visible,
      images = [],
      onClose,
      index = 0,
      containerHeight,
    } = this.props;
    const newImagesData = images.map(item => ({
      url: item,
      props: {},
    }));
    if (!visible) {
      return null;
    }
    return (
      // <AModal visible={visible}>
      <Modal
        visible={visible}
        transparent
        // transparent
        onRequestClose={() => {}}
      >
        {visible ? (
          <StatusBar backgroundColor="#000" barStyle="dark-content" />
        ) : (
          <StatusBar backgroundColor="#fff" barStyle="light-content" />
        )}
        <ImageViewer
          index={index}
          imageUrls={newImagesData}
          onClick={onClose}
          onSave={this.localOnSave}
          // backgroundColor="rgba(0,0,0 .5)"
          containerHeight={containerHeight}
          renderIndicator={(currentIndex, allSize) => (
            <View style={styles.indicator}>
              <PageMark
                count={allSize - 1}
                active={currentIndex - 1}
                type="mini"
              />
            </View>
          )}
          menus={({ cancel, saveToLocal }) => {
            return (
              <View style={{ ...styles.menuBox }}>
                <TouchableOpacity style={styles.menuItem} onPress={saveToLocal}>
                  <Text style={styles.menuText}>保存</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    ...styles.menuItem,
                    marginTop: 8,
                    paddingBottom: 30,
                  }}
                  onPress={cancel}
                >
                  <Text style={styles.menuText}>取消</Text>
                </TouchableOpacity>
              </View>
            );
          }}
        />
      </Modal>
      // </AModal>
    );
  }
}

export default ModalImageBox;
